<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        统计分析
        <small>会员数量折线图</small>
      </h1>

      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>会员数量折线图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="block">
          <!-- <span class="demonstration">默认</span> -->
          <el-date-picker
            v-model="value1"
            @change="dateChange"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      memberRate: {
        dateTimeList: [],
        numberList: [],
      },
      startData: "",
      endData: "",
      myChart1: "",
    };
  },
  mounted: function () {
    this.myChart1 = this.$echarts.init(document.getElementById("chart1"));
  },
  methods: {
    dateChange(val) {
      this.startData = val[0];
      this.endData = val[1];
      let that = this;
      this.$http
        .get(
          "api/member/selectMemberNumLineChart/" +
            this.startData +
            "/" +
            this.endData
        )
        .then((res) => {
          if (res.data.flag) {
            this.memberRate = res.data.data;
            this.myChart1.setOption({
              xAxis: {
                type: "category",
                data: that.memberRate.dateTimeList,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: that.memberRate.numberList,
                  type: "line",
                },
              ],
            });

          }
        });
    },
  },
  created(){
    this.dateChange(['2020-11-01','2020-11-31']);
  }
};
</script>
